<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>采购详情</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="//cdn.jsdelivr.net/jsbarcode/3.3.20/JsBarcode.all.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script type="text/javascript">
        function myprint() {
            //直接调用浏览器打印功能
            bdhtml = window.document.body.innerHTML;
            //定义打印区域起始字符，根据这个截取网页局部内容
            sprnstr = "<!--startprint-->"; //打印区域开始的标记
            eprnstr = "<!--endprint-->";   //打印区域结束的标记
            prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
            window.document.body.innerHTML = prnhtml;
            //开始打印
            window.print();
            //还原网页内容
            window.document.body.innerHTML = bdhtml;
        }

        function barcodeGen() {
            var barvalue = $("#billNo").val();
            if (barvalue == "") {
                alert("请输入条形码字符串！！")
            } else {
                $("#bcode").JsBarcode(barvalue);
            }
        }

        $(function () {
            barcodeGen();
            // $("#bcode").JsBarcode('[[${detail.billNo}]]');
        })
    </script>

</head>
<body>
<!--<input id="barcodeValue" th:value="${detail.billNo}" />-->
<div>
    <!--startprint-->

    <style type="text/css">
        .record-box {
            position: relative;
            width: 900px;
            padding: 0 5px;
            font-size: 13px;
            color: #787878;
        }

        .record-head {
            margin: -20px 0 80px 0;
            height: 40px;
            line-height: 40px;
            font-size: 13px;
        }

        .record-head span {
            float: left;
        }

        .record-head i {
            float: right;
            font: normal 28px/30px Tahoma;
            cursor: pointer;
        }

        .record-code {
            position: absolute;
            left: 50%;
            top: 10px;
            margin-left: -110px;
            width: 220px;
            font-size: 14px;
            text-align: center;
        }

        .record-code img {
            display: block;
        }

        .record-code span {
            line-height: 2;
        }

        .record-box h2 {
            font-weight: normal;
            font-size: 20px;
            margin-bottom: 20px;
        }

        .record-info {
            line-height: 40px;
            overflow: hidden;
        }

        .record-info span {
            float: left;
            width: 33.3%;
        }

        .record-info span:nth-child(1) {
            text-align: left;
        }

        .record-info span:nth-child(2) {
            text-align: center;
        }

        .record-info span:nth-child(3) {
            text-align: right;
        }

        .record-table {
            /*max-height: 250px;*/
            overflow-y: auto;
        }

        .record-table table {
            width: 100%;
        }

        .record-table th, .record-table td {
            padding: 10px 0;
            font-size: 13px;
            text-align: center;
            border: 1px solid #787878;
        }

        .record-table th {
            padding: 5px 0;
            font-weight: normal;
        }

        .record-foot {
            margin: 10px 0;
            line-height: 40px;
            overflow: hidden;
        }

        .record-foot span {
            float: left;
            width: 20%;
            text-align: center;
        }

        .record-foot span:nth-child(1) {
            text-align: left;
        }

        .record-foot span:nth-child(3) {
            width: 25%;
        }

        .record-foot span:nth-child(5) {
            width: 15%;
            text-align: right;
        }

        .record-button {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 10px;
            text-align: center;
        }

        .record-button a {
            border: 1px solid #787878;
            padding: 10px 15px;
            font-size: 14px;
            color: #787878;
        }
    </style>
    <div class="record-box">
        <div class="record-head"><span></span><b></b></div>
        <div class="record-code">
            <input type="hidden" id="billNo" th:value="${detail.billNo}"/>
            <img id="bcode" src=""/>
            <!--            <span id="r-code">CG190411100335401</span>-->
        </div>
        <h2>采购单</h2>
        <div class="record-info">
            <span>单据编号：<i id="r-number" th:text="${detail.billNo}">CG190411100335401</i></span>
            <span>合同号：<i id="r-number2" th:text="${detail.contractNo}">CG190411100335401</i></span>
            <span>供应商：<i id="r-shop" th:text="${detail.contactName}">华衣</i></span>
            <span>采购单日期：<i id="r-date" th:text="${detail.billDate}">2019-04-11</i></span>
            <span>总金额：<i th:text="${#numbers.formatDecimal(detail.getTotalAmount(), 0, 2)}" >2019-04-11</i></span>
            <span>创建时间：<i id="r-date1" th:text="${#dates.format(detail.createTime * 1000 ,'yyyy-MM-dd HH:mm:ss')}">2019-04-11</i></span>
        </div>
        <div class="record-table">
            <table>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>图片</th>
                    <th>商品</th>
                    <th>规格</th>
                    <th>SKU</th>
                    <th>数量</th>
                    <th>采购单价</th>
                    <th>单位</th>
                    <th>总金额</th>
                    <th>备注</th>
                    
                    <th th:if="${detail.getChecked()==0}"><a style="margin-left: 10px;color: blue;" th:attr="invoiceId=${detail.getId()}"  href="javascript:;" class="upd_goods">添加商品</a></th>
<!--                    <th>购货单价</th>-->
<!--                    <th>购货金额</th>-->
                </tr>
                </thead>
                <tbody id="r-table">
                <tr th:each="item:${detail.items}">
                    <td th:text="${itemStat.index}">1</td>
                    <td>
                        <img th:src="${item.colorImage}" width="50px" height="50px" />
                    </td>
                    <td th:text="${item.goodsName}">毛衣</td>
                    <td >
                        <span th:text="${item.colorValue}"></span>
                        <span th:text="${item.sizeValue}"></span>
                    </td>
                    <td th:text="${item.specNumber}">HY19M001Q012L0001</td>
                    <td th:text="${item.quantity}">2000</td>
                    <td th:text="${item.price}">2000</td>
                    <td th:text="${item.unitName}">2000</td>
                    <td th:if="${detail.getChecked()==0}"> <a style="color: blue;" th:attr="erpInvoiceId=${item.getIid()},erpInvoiceItemId=${item.getId()},sku=${item.getSpecNumber()},price=${item.getPrice()},num=${item.getQuantity()}"   href="javascript:;" class="updItem">修改</a><a style="margin-left: 10px;color: blue;" th:attr="erpInvoiceId=${item.getIid()},erpInvoiceItemId=${item.getId()},sku=${item.getSpecNumber()}"  href="javascript:;" class="delItem">删除</a></td>
<!--                    <td th:text="${#numbers.formatDecimal(item.price, 1, 2)}">99.00</td>-->
                    <td th:text="${#numbers.formatDecimal(item.amount, 1, 2)}">198000.00</td>
                    <td th:text="${item.description}"></td>
                </tr>

                </tbody>
            </table>
        </div>
        <div class="record-foot">
            <span>数量合计：<i id="r-total" th:text="${detail.totalQuantity}">6000</i></span>

            <span>制单人：<i id="r-name" th:text="${detail.userName}">张三丰</i></span>
        </div>

    </div>
    <!--endprint-->
<div><div class="record-button"><a href="javascript:;" onClick="myprint();">打印</a></div></div>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.delItem').click(function () {
                var erpInvoiceInfoId = $(this).attr('erpInvoiceItemId');
                var erpInvoiceId = $(this).attr('erpInvoiceId');
                var sku = $(this).attr('sku');
                Tips.confirm({
                    title: '删除此记录',
                    content: '您确定要删除 '+sku,
                    define: function () {
                        $.ajax({
                            url: "/ajax_purchase/erp_invoice_item_del",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify({erpInvoiceId:erpInvoiceId, erpInvoiceInfoId:erpInvoiceInfoId}),
                            success: function (res) {
                                if (res.code == 0) {
                                    location.reload();
                                }
                            },
                            complete: function(XMLHttpRequest){
                                if (XMLHttpRequest.getResponseHeader("REDIRECT")=="NO_ACCESS")alert("无权限访问");
                            },
                        });
                    }
                });
            });

        });
    </script>
    <script>
        layui.use(['laydate', 'layer'], function () {
            var layer = layui.layer;
            $('.updItem').click(function () {
                var erpInvoiceId = $(this).attr('erpInvoiceId');
                var erpInvoiceInfoId = $(this).attr('erpInvoiceItemId');
                var sku = $(this).attr('sku');
                var price = $(this).attr('price');
                var num = $(this).attr('num');
                var html='<div><p style="display: inline;">单价:</p><input name="price" id="price" style="width:200px;height:25px;" value='+price+' /></div><div style="margin-top: 20px;"><p style="display: inline;">数量:</p><input name="num" id="num" style="width:200px;height:25px;" value='+num+' /></div>';
                layer.open({
                    title: '修改 '+sku,
                    area: ['300px', '240px'],
                    btnAlign: 'c',
                    closeBtn:'1',//右上角的关闭
                    content: html,
                    btn:['确认','取消'],
                    yes: function (index, layero) {
                        var price1 = $('#price').val();
                        var num1 = $('#num').val();
                        $.ajax({
                            url: "/ajax_purchase/erp_invoice_info_edit",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify({erpInvoiceId:erpInvoiceId,erpInvoiceInfoId:erpInvoiceInfoId,price:price1,quantity:num1}),
                            success: function (res) {
                                if (res.code == 0) {
                                    layer.close(index);
                                    location.reload();
                                }
                            },
                            complete: function(XMLHttpRequest){
                                if (XMLHttpRequest.getResponseHeader("REDIRECT")=="NO_ACCESS")alert("无权限访问");
                            },
                        });
                    },
                    no:function(index) {
                        layer.close(index);
                        return false;//点击按钮按钮不想让弹层关闭就返回false
                    },
                    close:function(index)
                    {
                        alert('您刚才点击了关闭按钮');
                        return false;//点击按钮按钮不想让弹层关闭就返回false
                    }
                });
            });

            $(".upd_goods").click(function () {
                var $this = $(this);
                var invoiceId =  $this.attr("invoiceId");
                //确认订单iframe层
                layer.open({
                    type: 2,
                    title: '新增采购单商品',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1100px', '650px'],
                    content: '/goods/purchase_add_sku?invoiceId=' + invoiceId //iframe的url
                });

            })

        });
    </script>
</div>
</body>
</html>